<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<md-step label="Plan" md-complete="$ctrl.parent.vm.stepData[2].data.completed" ng-disabled="$ctrl.parent.vm.stepProgress < 3">
  <md-step-body>
    <md-content layout="column" class="gv-creation-plan-content gv-creation-content" layout-padding>
      <form name="apiPlanForm" flex>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm="50">
            <label>Name</label>
            <input ng-model="$ctrl.parent.plan.name" type="text" required name="name" minlength="4" md-maxlength="50" />
            <div class="hint" ng-if="$ctrl.shouldDisplayHint(apiPlanForm.name)">Plan Name</div>
            <div ng-messages="apiPlanForm.name.$error">
              <div ng-message="required">Plan name is required.</div>
              <div ng-message="minlength">The name has to be more than 4 characters long.</div>
              <div ng-message="md-maxlength">The name has to be less than 50 characters long.</div>
            </div>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm="25">
            <label>Security Type</label>
            <md-select ng-model="$ctrl.parent.plan.security" placeholder="Security type" required ng-required="true">
              <md-option ng-repeat="type in $ctrl.parent.securityTypes" ng-value="type.id">{{type.name}}</md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm style="margin-left: 10px">
            <md-switch
              aria-label="Auto validate subscription"
              ng-model="$ctrl.parent.plan.validation"
              ng-true-value="'AUTO'"
              ng-disabled="$ctrl.parent.plan.security == 'KEY_LESS'"
              ng-false-value="'MANUAL'"
            >
              &nbsp;&nbsp;Auto validate subscription
            </md-switch>
          </md-input-container>
        </div>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Description</label>
            <input type="text" ng-model="$ctrl.parent.plan.description" required />
          </md-input-container>
        </div>
        <div layout-gt-sm="row">
          <div layout="column" flex>
            <h5>Characteristics</h5>
            <md-chips
              ng-model="$ctrl.parent.plan.characteristics"
              placeholder="Enter a characteristic"
              md-add-on-blur="true"
              secondary-placeholder="+Characteristic"
              ng-click="apiPlanForm.$setDirty()"
            ></md-chips>
          </div>
        </div>
        <div layout-gt-sm="row" style="margin-top: 30px">
          <div layout="column" flex>
            <h5>Rate limit</h5>
            <div layout="row" flex>
              <md-input-container class="md-block" ng-if="$ctrl.parent.rateLimit.limit">
                <md-button
                  class="md-icon-button"
                  aria-label="Reset rate limit"
                  ng-click="$ctrl.parent.resetRateLimit();apiPlanForm.$setDirty()"
                >
                  <md-tooltip md-direction="top">Reset rate limit</md-tooltip>
                  <ng-md-icon icon="remove_circle_outline" style="fill: #b1bdc5; top: 0"></ng-md-icon>
                </md-button>
              </md-input-container>
              <md-input-container class="md-block" flex>
                <label>Max requests</label>
                <input type="number" ng-model="$ctrl.parent.rateLimit.limit" ng-required="$ctrl.parent.rateLimit.periodTime" />
              </md-input-container>
              <md-input-container class="md-block">
                <label>Period time</label>
                <input type="number" ng-model="$ctrl.parent.rateLimit.periodTime" ng-required="$ctrl.parent.rateLimit.limit" />
              </md-input-container>
              <md-input-container class="md-block" flex>
                <label>Period time unit</label>
                <md-select
                  ng-model="$ctrl.parent.rateLimit.periodTimeUnit"
                  placeholder="Time unit"
                  ng-required="$ctrl.parent.rateLimit.limit"
                >
                  <md-option ng-value="timeUnit" ng-repeat="timeUnit in $ctrl.parent.rateLimitTimeUnits">{{timeUnit}}</md-option>
                </md-select>
              </md-input-container>
            </div>
          </div>
          <div layout="column" flex>
            <h5>Quota</h5>
            <div layout="row" flex>
              <md-input-container class="md-block" ng-if="$ctrl.parent.quota.limit">
                <md-button class="md-icon-button" aria-label="Reset quota" ng-click="$ctrl.parent.resetQuota();apiPlanForm.$setDirty()">
                  <md-tooltip md-direction="top">Reset quota</md-tooltip>
                  <ng-md-icon icon="remove_circle_outline" style="fill: #b1bdc5; top: 0"></ng-md-icon>
                </md-button>
              </md-input-container>
              <md-input-container class="md-block" flex>
                <label>Max requests</label>
                <input type="number" ng-model="$ctrl.parent.quota.limit" ng-required="$ctrl.parent.quota.periodTime" />
              </md-input-container>
              <md-input-container class="md-block" flex>
                <label>Period time</label>
                <input type="number" ng-model="$ctrl.parent.quota.periodTime" ng-required="$ctrl.parent.quota.limit" />
              </md-input-container>
              <md-input-container class="md-block" flex>
                <label>Period time unit</label>
                <md-select ng-model="$ctrl.parent.quota.periodTimeUnit" placeholder="Time unit" ng-required="$ctrl.parent.quota.limit">
                  <md-option ng-value="timeUnit" ng-repeat="timeUnit in $ctrl.parent.quotaTimeUnits">{{timeUnit}}</md-option>
                </md-select>
              </md-input-container>
            </div>
          </div>
        </div>

        <div layout="row">
          <h4>Resource filtering</h4>
          <md-tooltip md-direction="top">Add resource filter</md-tooltip>
          <md-button
            type="button"
            class="md-icon-button"
            aria-label="Add path authorization"
            ng-click="$ctrl.parent.resourceFiltering.whitelist.push({})"
          >
            <ng-md-icon icon="add_circle_outline" style="fill: #b1bdc5; top: 0"></ng-md-icon>
          </md-button>
        </div>
        <div ng-repeat="whitelist in $ctrl.parent.resourceFiltering.whitelist">
          <div layout="row">
            <md-input-container class="md-block">
              <md-tooltip md-direction="top">Delete resource filter</md-tooltip>
              <md-button
                class="md-icon-button"
                aria-label="Delete path authorization"
                ng-click="$ctrl.parent.resourceFiltering.whitelist.splice($index, 1);apiPlanForm.$setDirty()"
              >
                <ng-md-icon icon="remove_circle_outline" style="fill: #b1bdc5; top: 0"></ng-md-icon>
              </md-button>
            </md-input-container>
            <md-input-container class="md-block" flex="80">
              <label>Ant pattern</label>
              <input type="text" ng-model="whitelist.pattern" />
            </md-input-container>
            <md-input-container class="md-block" flex>
              <label>Methods</label>
              <md-select ng-model="whitelist.methods" placeholder="Select the methods (Default ALL)" multiple>
                <md-option ng-value="method" ng-repeat="method in $ctrl.parent.methods">{{method}}</md-option>
              </md-select>
            </md-input-container>
          </div>
        </div>
      </form>
    </md-content>

    <md-step-actions layout="row">
      <div flex>
        <md-button ng-click="$ctrl.parent.moveToPreviousStep()">PREVIOUS</md-button>
      </div>
      <div flex layout="row" layout-align="end top">
        <md-button
          ng-if="$ctrl.parent.vm.stepData[2].optional"
          ng-click="$ctrl.parent.skipAddPlan($ctrl.parent.vm.stepData[2].data); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[2].data); apiPlanForm.$setPristine();"
          >SKIP
        </md-button>

        <md-button
          ng-disabled="apiPlanForm.$invalid"
          ng-click="$ctrl.parent.selectPlan(); $ctrl.parent.submitCurrentStep($ctrl.parent.vm.stepData[2].data)"
          >NEXT
        </md-button>
      </div>
    </md-step-actions>
  </md-step-body>
</md-step>
